<!-- 地图需要在线上环境进行配置，需要申请百度地图开放平台账号创建浏览器端应用并生成AK，还需要添加域名白名单 -->
<!--<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=BFdSIyFgeUBPV0XBaeVRxAV3ongoLUYk"></script>-->
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=PTEq5MwSOvGTXbbIbejETOGZ6yjl9v9D"></script>
</head>
<style>
    /* 百度地图样式 */
    .iw_poi_title {
        color: #CC5522;
        font-size: 14px;
        font-weight: bold;
        overflow: hidden;
        padding-right: 13px;
        white-space: nowrap
    }

    .iw_poi_content {
        font: 12px arial, sans-serif;
        overflow: visible;
        padding-top: 4px;
        white-space: -moz-pre-wrap;
        word-wrap: break-word
    }

    .BMapLabel {
        display: none;
    }

    .BMap_Marker > div > img {
        margin: 0 !important;
        left: 0 !important;
        top: 0 !important;
    }
</style>
<!--  / warpper  -->
<main class="warpper">

    <div id="shopMap" class="shopSec1">
        <div class="shopSec1_title">店铺查看</div>
        <!-- 查询容器 -->
        <div class="shopSec1_con">
            <!-- 省份 -->
            <div class="shopSec1_search">
                <div class="shopSec1_box">
                    <input class="provinceInput" type="text" value="{$province_name}" placeholder="省份" readonly>
                    <img src="__CDN__/static/images/arrow2.png" alt="">
                </div>
                <ul class="shopSec1_select">
                    <li data-value="" onclick="checkProvince(this)">全部</li>
                    {foreach $province as $row}
                    <li data-value="{$row}" onclick="checkProvince(this)">{$row}</li>
                    {/foreach}
                </ul>
            </div>
            <!-- 城市 -->
            <div class="shopSec1_search">
                <div class="shopSec1_box">
                    <input class="cityInput" type="text" value="{$city_name}" placeholder="城市" readonly>
                    <img src="__CDN__/static/images/arrow2.png" alt="">
                </div>
                <ul class="shopSec1_select citySelect">
                    {notempty name="$city"}
                    {foreach $city as $row}
                    <li>{$row}</li>
                    {/foreach}
                    {/notempty}
                </ul>
            </div>
            <!-- 关键词 -->
            <div class="shopSec1_search">
                <div class="shopSec1_box">
                    <input class="shopSearchInput" type="text" value="{$shop_name}" placeholder="输入关键字查找店铺">
                </div>
            </div>
            <!-- 查询 -->
            <div class="publicMore">
                <a href="javascript:;" onclick="getShopList()">查询</a>
            </div>
        </div>
        <!-- 店铺容器 -->
        <div class="shopSec1_con2">
            <div class="shopSec1_shop">
                <h6 style="display: flex;justify-content: space-between">
                    店铺列表
                    <a href="javascript:;" onclick="getShopAllList()">查看全部</a>
                </h6>
                <ul class="shopSec1_list">
                    {foreach $shop as $key => $row}
                    <!--                    <li class="on">-->
                    <li data-key="{$key}">
                        <h6>{$row.name}</h6>
                        <p>{$row.detail}</p>
                        <!-- <p>Tel: {$row.tel}</p> -->
                    </li>
                    {/foreach}
                </ul>
            </div>
            <!-- 地图 -->
            <div class="shopSec1_map" id="dituContent"></div>
        </div>
    </div>

    <div class="shopSec2">
        <div class="shopSec2_con">
            <div class="shopSec2_txt">
                <h6>{$shop_config.name}</h6>
                <p>{$shop_config.string}</p>
            </div>
            <!-- 店铺轮播 -->
            <div class="swiper-container shopSec2Swiper">
                <div class="swiper-wrapper">
                    {foreach $shop_config.images as $images}
                    <div class="swiper-slide">
                        <div class="shopSec2Swiper_img">
                            <img src="{$images}" alt="" width="100%">
                        </div>
                    </div>
                    {/foreach}
                </div>
                <div class="shopSec2Swiper_btn">
                    <div class="shopSec2Swiper_prev">
                        <img src="__CDN__/static/images/prev4.png" alt="">
                    </div>
                    <div class="shopSec2Swiper_next">
                        <img src="__CDN__/static/images/next4.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>

</main>
<!--  / warpper  -->
<script>
    function checkProvince(that) {
        let province = $(that).data('value');
        $.ajax({
            url: '/api/index/getShopArea',
            type: 'POST',
            beforeSend: function(xhr) {
                xhr.setRequestHeader("token", "{$token}");
            },
            data: {
                province
            },
            success: function(res) {
                let html = '';
                var city = res.data;
                for (let i = 0; i < city.length; i++) {
                    html += "<li>" + city[i] + "</li>"
                }
                $(".cityInput").val('');
                $(".citySelect").html(html)
            },
            error: function() {
                alert('提交失败');
            }
        })
    }

    function getShopList() {
        let province_name = $(".provinceInput").val();
        let city_name = $(".cityInput").val();
        let shop_name = $(".shopSearchInput").val();
        window.location.href = "{:url('index/index/shop')}?province_name="+province_name+"&city_name="+city_name+"&shop_name="+shop_name+"#shopMap"
    }

    function getShopAllList() {
        window.location.href = "{:url('index/index/shop')}?province_name=全部&city_name=&shop_name=#shopMap"
    }

    $(function () {

        // 省份、城市下拉展开
        $('body').on('click', '.shopSec1_box', function () {
            if ($(this).hasClass('on')) {
                $(this).removeClass('on');
                $(this).siblings('.shopSec1_select').slideUp(300);
            } else {
                $(this).addClass('on');
                $(this).siblings('.shopSec1_select').slideDown(300);
            }
        })
        // 选择省份、城市
        $('body').on('click', '.shopSec1_select li', function () {
            $(this).parent('.shopSec1_select').siblings('.shopSec1_box').find('input').val($(this).html());
            if ($(this).parent('.shopSec1_select').siblings('.shopSec1_box').hasClass('on')) {
                $(this).parent('.shopSec1_select').siblings('.shopSec1_box').removeClass('on');
                $(this).parent('.shopSec1_select').slideUp(300);
            } else {
                $(this).parent('.shopSec1_select').siblings('.shopSec1_box').addClass('on');
                $(this).parent('.shopSec1_select').slideDown(300);
            }
        })

        // 左侧店铺点击选中
        $('body').on('click', '.shopSec1_list li', function () {
            $(this).addClass('on').siblings('li').removeClass('on');
            let key = $(this).data('key');
            // 更新地图
            initMap(key);
        })

        // 店铺图片轮播
        var shopSec2Swiper = new Swiper('.shopSec2Swiper', {
            loop: true,
            speed: 1200,
            observer: true,
            observeParents: true,
            autoplay: 3000,
            autoplayDisableOnInteraction: false,
            paginationClickable: true,
            prevButton: '.shopSec2Swiper_prev',
            nextButton: '.shopSec2Swiper_next',
        })

    })

    $(window).ready(function () {
        $('.headerNav:first-child li').eq(4).addClass('on');
    })
    $(window).load(function () {
        if ($(window).width() <= 768) {
            $('.shopSec1,.shopSec2').addClass('on');
        }
    })
    $(window).resize(function () {

    })

    $(window).scroll(function () {
        var h = $(window).scrollTop()


    })



    //标注点数组
    var markerStr = '{$map_data}';
    var markerArr = $.parseJSON(markerStr);

    //创建和初始化地图函数：
    function initMap(key) {
        createMap(key);//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMarker(key);//向地图中添加marker
    }

    //创建地图函数：
    function createMap(key) {
        let lng = 120.218134,
            lat = 30.34541,
            level = 5;
        let province_name = "{$province_name}";
        if(markerArr.length > 0) {
            if(province_name) {
                level = 8;
                lng = markerArr[0].lng;
                lat = markerArr[0].lat;
                if(province_name == '全部') {
                    level = 5;
                }
            }
            if(key >= 0) {
                lng = markerArr[key].lng;
                lat = markerArr[key].lat;
                level = 15
            }
        }
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(lng, lat);//定义一个中心点坐标
        map.centerAndZoom(point, level);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局

        var mapStyle = {style: "grayscale"}
        map.setMapStyle(mapStyle);
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        // map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        // var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        // map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }

    //创建marker
    function addMarker(key) {
        for (var i = 0; i < markerArr.length; i++) {
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0, p1);
            var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point, {icon: iconImg});
            var iw = createInfoWindow(i);
            var label = new BMap.Label(json.title, {"offset": new BMap.Size(json.icon.lb - json.icon.x + 10, -20)});
            label.setStyle({
                borderColor: "#808080",
                color: "#333",
                cursor: "pointer"
            });
            marker.setLabel(label);
            map.addOverlay(marker);

            (function () {
                var index = i;
                var _iw = createInfoWindow(i);
                var _marker = marker;
                _marker.addEventListener("click", function () {
                    this.openInfoWindow(_iw);
                });
                _iw.addEventListener("open", function () {
                    _marker.getLabel().hide();
                })
                _iw.addEventListener("close", function () {
                    _marker.getLabel().show();
                })
                label.addEventListener("click", function () {
                    _marker.openInfoWindow(_iw);
                })
                if (!!json.isOpen) {
                    label.hide();
                    if(key == i){
                        _marker.openInfoWindow(_iw);
                    }
                }
            })()
        }
    }

    //创建InfoWindow
    function createInfoWindow(i) {
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>" + json.content + "</div>");
        return iw;
    }

    //创建一个Icon
    function createIcon(json) {
        var icon = new BMap.Icon("/static/images/us_mk_icon.png", new BMap.Size(json.w, json.h), {
            imageOffset: new BMap.Size(-json.l, -json.t),
            infoWindowOffset: new BMap.Size(json.lb + 5, 1),
            offset: new BMap.Size(json.x, json.h)
        })
        return icon;
    }

    initMap();//创建和初始化地图
</script>